<!-- 车辆详情 6.3-->
<template>
  <div class="dashboard-container vehicle-detail">
    <div class="app-container">
      <el-container>
        <!-- 头部tab栏 -->
        <div class="aside-box">
          <el-aside>
            <div
              class="aside-item"
              :class="{active:isActive==='jbData'}"
              @click="jbBtn('jbData')"
            >基本信息</div>
            <div
              class="aside-item"
              :class="{active:isActive==='xszData'}"
              @click="xszBtn('xszData')"
            >行驶证信息</div>
          </el-aside>
        </div>
        <!-- 基本信息组件 -->
        <vehicleInfo
          v-show="isActive==='jbData'"
          :id="this.$route.query.id"
          ref="dom"
        ></vehicleInfo>
        <!-- 行驶证信息 -->
        <vehicleDrivingLicense
          v-show="isActive==='xszData'"
          :id="this.$route.query.id"
        >

        </vehicleDrivingLicense>
      </el-container>
    </div>
  </div>
</template>
<script>
import vehicleInfo from './components/vehicle-info.vue'
import vehicleDrivingLicense from './components/vehicle-driving-license.vue'
export default {
  components: {
    vehicleInfo,
    vehicleDrivingLicense
  },
  data() {
    return {
      // 高亮
      isActive: 'jbData',
      // 模块切换
      domActive: false
    }
  },
  methods: {
    /**
     * 高亮
     */
    jbBtn(val) {
      this.isActive = val
    },
    xszBtn(val) {
      this.isActive = val
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.vehicle-detail {
  /deep/ .el-container{
    flex-direction: column;
    margin-left: 0px;
    // margin-top: 20px;
  }
  .in{
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    /deep/ .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;
        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
  .app-container{
    padding: 20px;
    background-color: #f3f4f7;
    padding-top: 23px;
  }
}

</style>
